<template lang="html">
  <chart
    :chartid='chartId'
    :option = 'options'
    :title='title'
  >
  <!-- <div class="sideCount">
    <div class="avg" v-for='item in avg'>
      <span>{{item.value}}人</span><span>{{item.name}}</span>
    </div>
  </div> -->
  </chart>
</template>

<script>
import chart from './chart.vue'
export default {
  components : {
    chart,
  },
  props : {
    chartId :{
      type : String,
    },
    title : {
      type : String,
    },
    caseBarData : {
      type : Array,
    }
  },
  data(){
    return {
      avg : [
        {name : '平均嫌疑人数',value:'210'},
        {name : '平均刑拘数',value:'210'},
        {name : '平均逮捕数',value:'210'}
      ],
      options : {
        color: ['#3398DB','#a6d587','#fad87e'],
        legend: {
            data: ['嫌疑人数', '刑拘数', '逮捕数'],
            textStyle : {
              color : '#000'
            },
            right : 50,
            top:50,
            itemWidth : 16,
            itemHeight : 7,
        },
        tooltip : {
            trigger: 'axis',
            axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            }
          },
         grid: {
             left: '3%',
             right: '4%',
             bottom: '6%',
             top: '28%',
             containLabel: true
         },
         xAxis : [
             {
                 type : 'category',
//               data : [],//数据交互
                 data: [],
                 axisTick: {
                     alignWithLabel: true
                 }
             }
         ],
         yAxis : [
             {
                 type : 'value',
                 splitLine : {
                  show : false,
                }
             }
         ],
         series : [
             {
                 name:'嫌疑人数',
                 type:'bar',
                 barWidth: '14px',
                 data:[]//数据交互
//								 data :this.series1Data
             },
             {
                 name:'刑拘数',
                 type:'bar',
                 barWidth: '14px',
                 data:[]//数据交互
//								 data :this.series2Data
             },
             {
                 name:'逮捕数',
                 type:'bar',
                 barWidth: '14px',
                 data:[]//数据交互
//								 data :this.series3Data
             }
         ]
      }
    }
  },
  watch:{
  	caseBarData(val){/*试过很多方法,只有这种方法最好*/
				this.options.xAxis[0].data=val[0];
				this.options.series[0].data=val[1];
				this.options.series[1].data=val[2];
				this.options.series[2].data=val[3];
  	}
  },


}
</script>

<style lang="scss" scoped>
.sideCount {
  width: 200px;
  height: 70px;
  position: absolute;
  padding-top: 12px;
  .avg {
    margin-bottom: 8px;
    margin-left: 28px;
    span:first-child {
      font-weight: 600;
    }
    span:last-child {
      font-size: 12px;
      margin-left: 20px;
    }
  }
}
</style>
